<script setup lang='ts'>
import { ref, reactive } from 'vue'
import { useRouter } from "vue-router";
import { FormRules, ElMessage } from "element-plus";
import { siteTitle } from '@/config/settings'
import { setToken } from "@/utils/localToken";
import { useUserStore } from "@/store/modules/user";
import { IResponseData } from "@/@types/utils.request";
import moment from 'moment'

const userStore = useUserStore();

const router = useRouter();

export interface LoginParamsType {
	username: string;
	password: string;
}

const formData = reactive<LoginParamsType>({
	username: "lynn",
	password: "123456",
});

const rules = reactive<FormRules>({
	username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
	password: [{ required: true, message: "请输入密码", trigger: "blur" }],
});

const formRef = ref();

const loading = ref(false);

const onSubmit = async () => {

	if(loading.value) return
	loading.value = true
	try {
		const valid: boolean | undefined = await formRef.value?.validate();
		if(valid) {
			// const response: IResponseData<any> = await accountLogin(formData);
			// 假装这么个数据结构
			const response: IResponseData<any> = {
				code: 0,
				data: { userid: 0, name: '大哥', photo: '', menus: [], roles: ["user"] },
				msg: "牛逼",
			}	
			const { data } = response;
			// 重置了用户的菜单和角色权限
			userStore.set({ id: parseInt(data.userid), name: data.name, photo: data.photo, menus: [], roles: data.roles });

			setToken("admin-token");
			ElMessage.success("登录成功");

			// 获取用户信息
			const reuslt: any = await userStore.getInfo()
			const { code, msg } = reuslt

			if (code !== 0) {
				// 没有获取用户信息成功
				ElMessage.warning(msg);
			}

            loading.value = false

			const { redirect, ...query } = router.currentRoute.value.query;
			router.replace({
				path: (redirect as string) || "/",
				query: {
					...query,
				},
			});
		}
	} catch (error) {
		
	}
}

const currentYear = ref(moment().year())

const copyRight = 'Autism'

</script>

<template>
	<div class='login-container'>
		<div class="login-content">
			<div class="login-title">
				{{ siteTitle }}
			</div>

			<div class="login-form">
				<el-form ref="formRef" :model="formData" :rules="rules">
					<el-form-item prop="username">
						<el-input placeholder="用户名" v-model="formData.username" clearable @keydown.enter="onSubmit">
							<template #prefix>
								<Icon iconfont class="login-icon" name="icon-yonghuming"></Icon>
							</template>
						</el-input>
					</el-form-item>
					<el-form-item prop="password">
						<el-input placeholder="密码" type="password" v-model="formData.password" clearable @keydown.enter="onSubmit">
							<template #prefix>
								<Icon iconfont class="login-icon" name="icon-mima"></Icon>
							</template>
						</el-input>
					</el-form-item>

					<el-form-item>
						<el-button class="login-button" @click="onSubmit" :loading="loading" type="primary">登 录</el-button>
					</el-form-item>
				</el-form>
			</div>

			<!-- <div class="login-control">
				记住密码
			</div> -->
		</div>

		<div class="login-fotter">
			copyright© {{ currentYear }} <span class="text--brand">{{ copyRight }}</span> Co. Ltd. All Rights Reserved.
		</div>
	</div>
</template>

<style lang="scss">
	$rowHeight: 50px;

    .login-container {
        .el-input {
            .el-input__wrapper {
                height: $rowHeight;
                color: var(--color-white);
                border: solid 1px var(--ft-cell-border-color);
            }
        }
    }
</style>

<style lang='scss' scoped>
$rowHeight: 50px;

.login-container {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color:#FFFFFF;
	

	.login-content {
		min-width: 20%;
		max-width: 50%;
		max-height: 30%;
		min-height: 300px;
		padding: 10px 50px;
		border-radius: 10px;
		box-shadow: 0 2px 4px var(--ft-shadow-color-1);
		border-top: solid 5px var(--ft-color-primary);

		.login-title {
			height: 80px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30px;
		}

		.login-icon {
			color: #e5e5e5;
		}

		.login-button {
			width: 100%;
			height: $rowHeight;
			font-size: 18px;
		}
	}

	.login-fotter {
		width: 100%;
		height: max-content;
		position: absolute;
		text-align: center;
		bottom: 20px;
	}
}
</style>
